<!DOCTYPE html>
<html lang="en">

<head>
	<title id="page_title">Sovit2D集成示例(DIV在线嵌入场景)</title>
	<meta name="referrer" content="strict-origin-when-cross-origin">
	<meta charset="UTF-8">
	<meta name="referrer" content="no-referrer" />
	<!-- <script src="./res/static/js/jquery-1.10.2.min.js"></script> -->
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<!--引入在线js解析器,这里引入的是数维图云端库,如果连接的是私有部署版后台,则地址改为私有部署版访问地址-->
	<script src="https://admin.sovitjs.com/static/sovitjs/Sovit2DPaser.min.js"></script>
	<script>
		//定义数据源的查询地址
		var apiUrl = "https://admin.sovitjs.com/restapi/sovit/Rest/";
	</script>
</head>

<body>

	<!-- <div id="app"> -->
		<div id="sovit2d_1" style="width:100%;height: 1080px;">
			<!--用来嵌入2D场景的DIV容器-->
		</div>
	<!-- </div> -->
</body>

</html>
<script>
	let sceneMain = null;
	$(document).ready(function () {
		var lazyFun;
		init("sovit2d_1", 1920, 1080);
		window.addEventListener("resize", () => {
			clearTimeout(lazyFun);
			lazyFun = setTimeout(function () {
				init("sovit2d_1", 1920, 1080);
			}, 600);
		});
		sceneMain = new Sovit2DPaser.Scene2dMain({
			//apiurl: 'http://localhost:9443',
			/**
			 * 说明：apiurl用来定义后端接口地址。当部署方式不一样时接口地址的写法不一样。
			 * 具体写法：
			 * 数维图云端部署：https://admin.sovitjs.com/restapi
			 * 私有版部署：http://192.168.0.10:9188
			 * 私有版部署时需要写对应部署的服务器的IP及服务端口
			 */
			apiurl: 'https://admin.sovitjs.com/restapi',
			publishType: 1 //1为在线引用组件   2为离开引用组件
		});
		$.ajax({
			//当模型发布时用的是签名认证发布时需要通过后端获取认证相关信息,如果是公开发布此步骤省略
			url: apiUrl + "/appdemo/free/getSignatureJson",
			method: 'POST',
			data: {
				appid: "1011"
			},
			success: function (data) {
				initSceneMain();
			},
			error: function () {

			}
		});
	});

	function initSceneMain() {
		//引入图表并在指定的DIV里面显示
		sceneMain.init2d("sovit2d_1", {
			pageId: "3477577930035429384", //图表的ID，发布图表的地方可以找到, 以下的5个参数是签名认证相关信息,如果模型是公开发布则无需设置

		}, function (reData) {
			console.info(reData)
		});
	}
	function init(el, width, height) {
		var _el = document.getElementById(el);
		var hScale = window.innerHeight / height;
		var wScale = window.innerWidth / width;
		_el.style.transform = "scale(" + wScale + "," + hScale + ")";
	}
</script>